<script setup>
import UserSelectCard from './UserSelectCard.vue'
import { User, CloseBold, Position } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
import { userExitService } from '@/api/user'
import notLogin from '@/assets/default.png'
import { ZlMessage } from '@/utils/message'

// 用户仓库数据
const userStore = useUserStore()
const router = useRouter()
const userInfo = userStore.userInfo

const userindex = () => {
  router.push('/user/index')
}

const exit = async () => {
  const res = await userExitService()
  ZlMessage.success(res.data.msg)
  userStore.exit()
  router.push('/')
}
</script>
<template>
  <a-popover
    v-if="userStore.userInfo.userId"
    style="width: 250px; margin-top: 8px"
    position="bottom"
  >
    <el-avatar size="30" :src="userInfo.userImg" style="cursor: pointer" />
    <template #content>
      <div
        class="demo-rich-conent"
        style="display: flex; gap: 16px; flex-direction: column; padding: 10px"
      >
        <div class="username">
          <el-avatar size="lagre" :src="userInfo.userImg" />

          <div style="padding: 10px">
            <p
              class="demo-rich-content__name"
              style="margin: 0; font-weight: 500"
            >
              NickName
            </p>
            <p
              class="demo-rich-content__mention"
              style="margin: 0; font-size: 14px; color: var(--el-color-info)"
            >
              {{ userInfo.nickName }}
            </p>
          </div>
        </div>
        <user-select-card cardTitle="个人中心" @click="userindex">
          <template #icon>
            <User />
          </template>
        </user-select-card>
        <!-- <user-select-card cardTitle="编辑资料">
          <template #icon>
            <Edit />
          </template>
        </user-select-card> -->
        <user-select-card cardTitle="退出登录" @click="exit">
          <template #icon>
            <CloseBold />
          </template>
        </user-select-card>
      </div>
    </template>
  </a-popover>

  <a-popover v-else style="width: 250px; margin-top: 8px" position="bottom">
    <!-- <template #reference>
      <img
        style="height: 40px; width: 40px"
        src="../../../assets/default.png"
        alt=""
      />
    </template> -->
    <el-avatar size="30" :src="notLogin" style="cursor: pointer" />
    <template #content>
      <div
        class="demo-rich-conent"
        style="display: flex; gap: 16px; flex-direction: column; padding: 10px"
      >
        <div class="username">
          <el-text>你还未登录哦！</el-text>
        </div>
        <user-select-card cardTitle="去登陆" @click="router.push('/login')">
          <template #icon>
            <Position />
          </template>
        </user-select-card>
      </div>
    </template>
  </a-popover>
</template>
<style lang="scss" scoped>
.username {
  display: flex;
  align-items: center;
}
</style>
